<template>
  <div>
    <!-- 任务详情, 代码片段开始 -->
    <div class="detail-pad-l font-16">
      <el-row :gutter="20" class="pad-t-10 pad-b-10">
        <el-col :span="8">
          <span class="title-left">任务编码：</span>{{ taskInfo.taskCode }}
        </el-col>
        <el-col :span="8">
          <span class="title-left">任务名称：</span>{{ taskInfo.taskName }}
        </el-col>
        <el-col :span="8">
          <span class="title-left">任务酬金：</span><i class="money-span font-red" v-if="taskInfo.budgetAmount">{{ taskInfo.budgetAmount }}元</i>
        </el-col>
      </el-row>
      <el-row :gutter="20" class="pad-t-10 pad-b-10">
        <el-col :span="8">
          <span class="title-left">任务类型：</span>
          <template v-if="taskInfo.oneCategoryName">
            {{ taskInfo.oneCategoryName + '|'}}
          </template>
          <template v-if="taskInfo.twoCategoryName">
            {{ taskInfo.twoCategoryName }}
          </template>
        </el-col>
        <el-col :span="8">
          <span class="title-left">任务模式：</span>
          <template v-if="taskInfo.taskType == 2">
            {{ taskTypes[taskInfo.taskType] }}
          </template>
          <template v-else>
            <span>{{ remunerationTypes[taskInfo.remunerationType] }}</span>
            <span v-if="taskInfo.remunerationTypeModel === 12">| 推广类型</span>
            <span v-if="taskInfo.remunerationTypeModel === 11">| 技能类型</span>
          </template>
        </el-col>
        <el-col :span="8" v-if="taskInfo.budgetNum">
          <span class="title-left">验收件数：</span>
          <span style="color: red">{{ Math.floor(taskInfo.budgetAmount/taskInfo.budgetNum*100) /100 }}</span>元/件
          <span>共{{ taskInfo.budgetNum + taskInfo.budgetNumAppend}}件</span>
        </el-col>
      </el-row>
      <el-row :gutter="20" class="pad-t-10 pad-b-10">
        <el-col :span="8">
          <span class="title-left">发布者：</span>{{ taskInfo.enterpriseName}}
        </el-col>
        <el-col :span="8">
          <span class="title-left">任务周期：</span>
          <template v-if="taskInfo.taskStartTime">
            【{{ taskInfo.taskStartTime }} ~ {{ taskInfo.taskEndTime }}】共 <span class="font-blue">{{  dateNum }}</span> 天
          </template>
        </el-col>
      </el-row>
      <el-row :gutter="20" class="flex pad-t-10 pad-b-10">
        <el-col :span="24">
          <span class="title-left">任务描述：</span>
          <span class="flex-item simple-box descript-con" v-html="taskInfo.taskDescription"></span>
        </el-col>
      </el-row>
      <el-row :gutter="20" class="pad-t-10 pad-b-10" v-if="taskFileList">
        <el-col :span="24">
          <span class="title-left" >附件：</span>
          <span class="simple-box font-12">
            <div class="flex v-align-c" v-for="item in taskFileList">
              <a :href="item.fileUrl" style="color: #00a0e9;text-decoration:underline">{{ item.fileName }}</a>
            </div>
          </span>
        </el-col>
      </el-row>
      <el-row :gutter="20" class="pad-t-10 pad-b-10">
        <el-col :span="8">
          <span class="title-left">招募人数：</span>
          <template v-if="taskInfo.hireNum">
            <template v-if="taskInfo.remunerationTypeModel === 12">
              不限
            </template>
            <template v-else>
              {{ taskInfo.hireNum }}人
            </template>
          </template>
        </el-col>
        <el-col :span="8">
          <span class="title-left">结算方式：</span>
          {{ settleTypes[taskInfo.settleType ]}}
        </el-col>
        <el-col :span="8">
          <span class="title-left">支付周期：</span>
          <span>{{ payCycles[taskInfo.payCycle] }}</span>
          <template v-if="taskInfo.payDay != '0'">
             <span v-if="taskInfo.payCycle == '2'">{{'每周: ' + taskInfo.payDay }}</span>
             <span v-if="taskInfo.payCycle == '3'">{{'每月:' + taskInfo.payDay + '号' }}</span>
          </template>
        </el-col>
      </el-row>
      <el-table :data="taskLevelList" :show-header="false" v-if="taskLevelList" style="width: 50%; background-color: #1e6abc" class="level-table mar-t-30">
        <el-table-column prop="levelName" min-width="120" align="center"></el-table-column>
        <el-table-column prop="levelNum" min-width="120" align="center">
          <template slot-scope="scope">
            <template v-if="taskInfo.remunerationTypeModel === 12">
              不限人数
            </template>
            <template v-else>
              共 {{scope.row.levelNum}} 名
            </template>
          </template>
        </el-table-column>
        <el-table-column prop="levelAmount" min-width="200" align="center">
          <template slot-scope="scope">
            <template v-if="taskInfo.remunerationTypeModel === 12">
              完成后每件 {{ Math.floor((taskInfo.budgetAmount/taskInfo.budgetNum) * 100) / 100 }} 元
            </template>
            <template v-else-if="taskInfo.remunerationTypeModel === 11">
              通过后每件 {{ Math.floor((taskInfo.budgetAmount/taskInfo.budgetNum) * 100) / 100 }} 元
            </template>
            <template v-else>
              完成后每人 {{ Math.floor((scope.row.levelAmount/scope.row.levelNum) * 100) / 100 }} 元
            </template>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 任务详情, 代码片段结束 -->
  </div>
</template>

<script>
  import { getTaskInfo, getListTaskLevel } from '@/api/project/taskInfo'
  export default {
    name: 'dashboard-index',
    props: {
      // 任务id
      taskId: {
        type: String
      }
    },
    data() {
      return {
        signNum: 0,
        dateNum: 0,
        settleTypes: [],
        payCycles: [],
        payDayName: '',
        remunerationTypes: [],
        taskTypes: [],
        // 任务附件
        taskFileList: [],
        // 等级集合
        taskLevelList: [],
        taskInfo: {
          taskId: '',
          taskName: '',
          taskCode: '',
          budgetAmount: 0,
          budgetNumAppend: 0,
          enterpriseName: '',
          oneCategoryName: '',
          twoCategoryName: '',
          threeCategoryName: '',
          remunerationType: '',
          taskType: '',
          taskStartTime: '',
          taskEndTime: '',
          taskDescription: '',
          hireNum: '',
          settleType: '',
          payCycle: ''
        }
      }
    },
    created() {
      this.initTaskInfo()
    },
    methods: {
      initTaskInfo() {
        getTaskInfo(this.taskId).then(response => {
          if (response.isError) return
          this.taskInfo = response.data
          this.taskInfo.enrollStartTime = response.data.enrollStartTime.split(' ')[0]
          this.taskInfo.enrollEndTime = response.data.enrollEndTime.split(' ')[0]
          this.taskInfo.taskStartTime = response.data.taskStartTime.split(' ')[0]
          this.taskInfo.taskEndTime = response.data.taskEndTime.split(' ')[0]
          this.signNum = this.timeCalculation(this.taskInfo.taskEndTime, this.timeFormat(new Date()))
          this.dateNum = this.timeCalculation(this.taskInfo.taskStartTime, this.taskInfo.taskEndTime)
          this.taskFileList = response.data.taskFileList
          if (this.taskInfo.payDay === 1) { this.payDayName = '周一' }
          if (this.taskInfo.payDay === 2) { this.payDayName = '周二' }
          if (this.taskInfo.payDay === 3) { this.payDayName = '周三' }
          if (this.taskInfo.payDay === 4) { this.payDayName = '周四' }
          if (this.taskInfo.payDay === 5) { this.payDayName = '周五' }
          if (this.taskInfo.payDay === 6) { this.payDayName = '周六' }
          if (this.taskInfo.payDay === 7) { this.payDayName = '周日' }
          if (response.data.dict.settleType) {
            this.settleTypes = response.data.dict.settleType
          }
          if (response.data.dict.remunerationType) {
            this.remunerationTypes = response.data.dict.remunerationType
          }
          if (response.data.dict.payCycle) {
            this.payCycles = response.data.dict.payCycle
          }
          if (response.data.dict.taskType) {
            this.taskTypes = response.data.dict.taskType
          }
        })
        this.initListTaskLevel()
      },
      initListTaskLevel() {
        getListTaskLevel(this.taskId).then(response => {
          if (response.isError) return
          this.taskLevelList = response.data
        })
      },
      // 时间计数
      timeCalculation(startTime, endTime) {
        const date2 = endTime.split('-')
        const date1 = startTime.split('-')
        const odate2 = new Date(date2[1] + '-' + date2[2] + '-' + date2[0])
        const odate1 = new Date(date1[1] + '-' + date1[2] + '-' + date1[0])
        return parseInt(Math.abs(odate2 - odate1) / 1000 / 60 / 60 / 24) + 1
      },
      timeFormat(date) {
        const year = date.getFullYear()
        let mounth = date.getMonth() + 1
        let day = date.getDate()
        if (mounth < 10) {
          mounth = '0' + mounth
        }
        if (day < 10) {
          day = '0' + day
        }
        return year + '-' + mounth + '-' + day
      }
    }
  }
</script>

<style lang="less" scoped>
.time-last{
  font-size: 20px;
  text-align: center;
  border-radius: 5px;
  padding: 22px 0;
  margin: 50px 0;
  span{
    color: #db5557;
    padding: 0 5px;
  }
}
.div-b-g {
  background: #2BD591;
}
.div-b-r {
  background: #B34D61;
}
.div-b-d {
  background: deepskyblue;
}
.detail-pad-l{
  padding: 10px 50px;
}
.title-left{
  min-width: 100px;
  font-weight: bold;
  font-size: 18px;
  display: inline-block;
}
.money-span{
  font-style: normal;
}
.simple-box{
  width: 85%;
  display: inline-block;
  vertical-align: top;
  margin-left: -5px;
}
.level-table{
  // a-bottom:30px;
  // mar
}
</style>
